<template>
	<div class="leftnav">
		<div class="nav-items" v-for="(item,key,index) in list" :key="index">
			<div class="head" @click="navClick(item.id,navItems[item.id],item.type)">
				<span class="iconfont icon-shangdian" :class="item.icon"></span>
				<span>{{item.label}}</span>
				<span :class="{'iconfont':true,'el-icon-arrow-right':!navItems[item.id],'el-icon-arrow-down':navItems[item.id]}"></span>
			</div>
			<ul v-show="navItems[item.id]">
				<div class="head2 " v-for="(si,key,index) in item.sonlist" :key="index" @click="getdata(si)" :class="{routerlinkactive:ScenicText==si.link}">
					<span class="dian"></span>
					<span>{{si.label}}</span>
				</div>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				list: [{
						type: false,
						id: 0,
						label: "商户信息",
						icon: 'icon-shangdian',
						sonlist: [{
								type: true,
								label: "商户注册",
								link: "/SMreg",
							},
							{
								type: false,
								label: "商户详情",
								link: "/SMinfo/1",
							},
							{
								type: false,
								label: "合同管理",
								link: "/SMcontract",
							},
						]
					}, {
						type: false,
						id: 1,
						label: "职员管理",
						icon: 'icon-yonghuguanli',
						sonlist: [{
								type: true,
								label: "职员列表",
								link: "/UserMag",
							},
							{
								type: true,
								label: "个人信息",
								link: "/UserSet/profile",
							},
							{
								type: true,
								label: "职员录入",
								link: "/UserSet/add",
							},
						]
					},{
						type: false,
						id: 2,
						label: "财务管理",
						icon: 'icon-yonghuguanli',
						sonlist: [
							{
								type: false,
								label: "财务管理",
								link: "/FMlist/set",
							},
						]
						
					},
					{
						type: false,
						id: 3,
						label: "产品管理",
						icon: 'icon-chanpin',
						sonlist: [{
								type: false,
								label: "添加产品",
								link: "/SGgoodsadd-scenic",
							},
							{
								type: false,
								label: "产品查询",
								link: "/SGgoodsselect",
							},
						]
					},
					{
						type: false,
						id: 4,
						label: "订单管理",
						icon: 'icon-yonghuguanli',
						sonlist: [
							{
								type: false,
								label: "订单管理",
								link: "/Oticket",
							},
						]
						
					},
					{
						type: false,
						id: 5,
						label: "平台服务",
						icon: 'icon-quanxianguanli',
						sonlist: [{
							label: "在线客服",
							link: "/",
						}]
					},
				]
			}
		},
		computed: {
			...mapGetters([
				'token',
				'navItems',
				'UserInfo_data',
				'ScenicText'
			]),
		},
		created() {
			if (this.UserInfo_data.type === 2) {
				this.list[0].sonlist[1].link = "/SMinfo/2";
				this.list[3].sonlist[0].link = "/SGgoodsadd-hotel";
			}
			for (var i = 0; i < this.UserInfo_data.status.length; i++) {
				if (this.UserInfo_data.status[i] === '1') {
					for (var j = 0; j < this.list.length; j++) {
						this.list[j].type = true;
						for (var s = 0; s < this.list[j].sonlist.length; s++) {
							this.list[j].sonlist[s].type = true
						}
					}
				}
				if (this.UserInfo_data.status[i] === '2') {
					this.list[1].type == true;
				}
				if (this.UserInfo_data.status[i] === '3') {
					this.list[4].type == true;
					this.list[4].sonlist[0].type == true;
				}
				if (this.UserInfo_data.status[i] === '4') {
					this.list[3].type == true;
					this.list[3].sonlist[0].type == true;
					this.list[3].sonlist[1].type == true;
				}
				if (this.UserInfo_data.status[i] === '5') {
					this.list[2].type == true;
					this.list[2].sonlist[0].type == true;
				}
				if (this.UserInfo_data.status[i] === '6') {
					this.list[4].type == true;
				}
			}
		},
		methods: {
			...mapActions({
				setNavItems: 'setNavItems',
				getres_userrow: 'getres_userrow',
				getres_productInformation: 'getres_productInformation',
				setScenicText: 'setScenicText'
			}),
			getdata(res) {
				if (!res.type) {
					if (this.UserInfo_data.status[0] === '7') {
						this.$alert('暂无权限，请提交公司信息并等待审核完成', '提示', {confirmButtonText: '确定',});
					} else {
						this.$alert('暂无权限', '提示', {confirmButtonText: '确定',});
					}
					return;
				}
				this.setScenicText(res.link);
				if (res.label === '商户详情') {
					this.productInformation(res.link);
				} else {
					this.$router.push(res.link)
				}
			},
			productInformation(link) {
				this.$api.GetproductInformation({
						token: this.token
					})
					.then(res => {
						if (res.code === 200) {
							this.getres_productInformation(res.result)
						}else{
							this.getres_productInformation(false)

						}
						this.$router.push(link)
					})
			},
			navClick(i, value, type) {
				if (!type) {
					if (this.UserInfo_data.status[0] === '7') {
						this.$alert('暂无权限，请提交公司信息并等待审核完成', '提示', {confirmButtonText: '确定',});
					} else {
						this.$alert('暂无权限', '提示', {confirmButtonText: '确定',});
					}
					return;
				}
				let nav = JSON.parse(JSON.stringify(this.navItems));
				nav[i] = !value;
				this.setNavItems(nav);
			}
		}
	}
</script>
<style scoped>
	a {
		text-decoration: none;
	}
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.leftnav {
		width: 150px;
		min-height: 600px;
		background: #159eab;
		float: left;
	}
	.iconfont {
		line-height: 50px;
	}
	.head {
		height: 50px;
		line-height: 50px;
		color: #fff;
		user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		-moz-user-select: none;
		cursor: pointer;
		text-align: left;
		padding: 0 10px;
		box-sizing: border-box;
	}
	.head:hover {
		background: #0a5b63;
	}
	.head .iconfont:first-child {
		margin-right: 5px;
	}
	.head .iconfont:last-child {
		float: right;
	}
	.head2 {
		height: 40px;
		line-height: 40px;
		color: #fff;
		font-size: 14px;
		user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		-moz-user-select: none;
		cursor: pointer;
		text-align: center;
	}
	.dian {
		display: inline-block;
		width: 4px;
		height: 4px;
		border-radius: 50%;
		background: #fff;
		margin-right: 5px;
		margin-bottom: 2px;
	}
	.icon-zhiyuanguanli {
		font-size: 20px;
	}
	.routerlinkactive {
		background: #0a5b63;
	}
</style>